<template>
<div class="shopitem">
   <div class="itemselector">
     <checkButton @checkBtnClick="checkBtnClick" v-model="product.checked"></checkButton>
   </div>
   <div class="itemimg">
     <img :src="product.imgURL" alt="商品图片" />
   </div>
   <div class="iteminfo">
     <div class="itemtitle">{{product.title}}</div>
     <div class="itemdesc">商品描述: {{product.desc}}</div>
     <div class="infobottom">
       <div class="itemprice left">¥{{product.nowPrice}}</div>
       <div class="itemcount right">
         <div class="countButton" @click="addCount">+</div>
         <span>{{product.count}}</span>
         <div class="countButton" @click="subCount">-</div>
         </div>
     </div>
   </div>
   <Toast :message="message" v-show="toastIsShow" ></Toast>
</div>
</template>

<script>
import checkButton from './checkButton'
import Toast from 'components/toast/toast.vue'
export default {
  name: 'cartlistitem',
  props: {
    product: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      toastIsShow: false,
      message: ''
    }
  },
  methods: {
    checkBtnClick() {
      this.product.checked = !this.product.checked
    },
    addCount() {
      if (this.product.count >= 99) {
        this.message = '不能继续添加'
        this.toastIsShow = true
        setTimeout(() => {
          this.message = ''
          this.toastIsShow = false
        }, 1500);
      } else {
        this.$store.commit('addcart', this.product)
      }
    },
    subCount() {
      if (this.product.count <= 1) {
        this.message = '不能继续减少'
        this.toastIsShow = true
        setTimeout(() => {
          this.message = ''
          this.toastIsShow = false
        }, 1500);
      } else {
        this.$store.commit('subcart', this.product)
      }
    }
  },
  components: {
    checkButton,
    Toast
  }
}
</script>

<style lang='stylus' scoped>
.shopitem
  display flex
  width 100%vw
  padding: 5px
  border-bottom: 1px solid #ccc
  .itemselector
    width: 14%
    display: flex
    justify-content: center
    align-items: center
  .itemimg
    padding: 5px
    img
      width 80px
      height 100px
      display: block
      border-radius: 5px
  .iteminfo
    font-size: 17px
    color: #333
    padding: 5px 10px
    position: relative
    overflow: hidden
    .itemtitle,.itemdesc
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
    .itemdesc
      margin-top: 15px
      font-size: 14px
      color: #666
  .infobottom
    margin-top: 10px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    .itemprice
      color: orangered
    .itemcount
      display flex
      text-align center
      width 70px
      height 20px
      line-height 20px
      span
        flex 0 0 30px
        padding 0 3px
        border 1px solid #d4d8db
      .countButton
        flex 1
        margin 0
        padding 0
        box-shadow 0
        color: #ffffff
        font-size: 11px
        background: #d4d8db
        text-decoration: none
</style>